<template>
  <div class="box_wrap">
    <el-form
      v-if="detailData?.name"
      ref="ruleFormRef"
      :model="detailData"
      :rules="rules"
      label-position="left"
      label-width="120px"
      class="form_box"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目名称" prop="name">
            {{ detailData.name }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="制作方名称" prop="producer">
            <el-input
              v-model="detailData.producer"
              placeholder="请输入制作方名称"
              clearable
              maxlength="30"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="总集数" prop="episodeNum">
            {{ `${detailData.updateEpisodeNo}/${detailData.episodeNum}` }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目状态" prop="status">
            <el-tag v-if="detailData.status === 1">未上映</el-tag>
            <el-tag v-else-if="detailData.status === 2" type="warning">
              更新中
            </el-tag>
            <el-tag v-else-if="detailData.status === 3" type="success">
              已完结
            </el-tag>
            <el-tag v-else type="danger">未知状态</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="发行年份" prop="releaseYear">
            {{ detailData.releaseYear }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目海报" prop="cover">
            <el-image
              style="width: 90px; border-radius: 4px"
              :src="coverImg"
              :zoom-rate="1.2"
              :preview-src-list="[coverImg]"
              :initial-index="1"
              fit="contain"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目资质" prop="recordType">
            <el-radio-group v-model="detailData.recordType">
              <el-radio :label="1">网络剧片发行许可证</el-radio>
              <el-radio :label="2">剧目备案号</el-radio>
              <el-radio :label="3">普通备案号</el-radio>
              <el-radio :label="4">重点备案号</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="备案信息" prop="recordInfo">
            <el-input
              v-model="detailData.recordInfo"
              placeholder="请填写网络剧片发行许可证号。如：（沪）网剧审字（2023）第001号"
              clearable
              maxlength="30"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="剧目授权材料" class="image_url">
            <div v-if="imageURL" class="img_box">
              <el-image
                style="height: 100px; border-radius: 4px"
                :src="imageURL"
                :zoom-rate="1.2"
                :preview-src-list="[imageURL]"
                :initial-index="1"
                fit="contain"
              />
              <el-icon @click="deleteImg" class="delete_icon">
                <CircleClose />
              </el-icon>
            </div>
            <uploadFile
              v-else
              v-model="detailData.material"
              :fileSize="10240"
              @updateFileList="seccessFile"
            />
            <p style="font-size: 12px; color: #969696">
              支持.jpeg/.jpg/.png格式，文件大小不超过10Mb
            </p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { ref, reactive, toRefs, computed } from "vue";
import type { FormInstance } from "element-plus";
import { getOperasLicense } from "@/api/operateCenter/episode/index";
import uploadFile from "@/components/UploadFile/index.vue";
import { CircleClose } from "@element-plus/icons-vue";
import { cloneDeep } from "lodash-es";
import { useRoute } from "vue-router";

const props = defineProps({
  detailData: <any>Object,
});

const { detailData } = toRefs(props); // 剧目详情信息
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const imageURL = ref<string>("");
const id = ref(Number(route.query.id) || 0);
const randN = Math.floor(Math.random() * 100000); // 生成随机数，保证每个图片不走浏览器缓存

const coverImg = computed(() => {
  return `https://theater-static-1320245876.cos.ap-guangzhou.myqcloud.com/static/cover/${detailData.value?.cover}?${randN}`;
});

// console.log("剧目详情信息-------", detailData.value);

const firstData = ref(
  JSON.parse(localStorage.getItem("firstData") as string) || ""
);

// console.log("firstData---", firstData.value);

watch(
  () => firstData.value,
  (val: any) => {
    if (val) {
      detailData.value = val;
    }
  },
  { deep: true, immediate: true }
);

const rules = reactive({
  producer: [{ required: true, message: "请填写制作方名称", trigger: "blur" }],
  recordType: [
    { required: true, message: "请选择剧目资质", trigger: "change" },
  ],
  recordInfo: [{ required: true, message: "请输入备案信息", trigger: "blur" }],
});

// 删除授权材料
const deleteImg = () => {
  imageURL.value = "";
};

// 文件上传成功
const seccessFile = (file: Array<any>) => {
  if (!file.length) return (detailData.value.material = "");
  let fileData = file[0].raw;
  const formFile = new FormData();
  formFile.append("file", fileData);
  request
    .put(`/api/operation/Operas/${detailData.value.id}/license`, formFile)
    .then(() => {
      detailData.value.material = fileData.name;
    });
};

const getImg = async () => {
  const res: Blob = await getOperasLicense(id.value).then();
  imageURL.value = window.URL.createObjectURL(res); // 将Blob对象转换为URL
};

defineExpose({
  ruleFormRef,
  detailData,
});

onMounted(() => {
  getImg();
});
</script>
<style scoped lang="scss">
.box_wrap {
  padding: 0 30px;

  .image_url {
    :deep(.el-form-item__content) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .img_box {
    position: relative;
    display: flex;
    align-items: center;
    height: 100px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;

    .delete_icon {
      position: absolute;
      top: 3px;
      right: 0;
      color: #666;
      cursor: pointer;
    }
  }
}
</style>
